<template>
    <view class="hb-wrapper">
        <view class="price-box">
            <view class="price"> <text class="unit">￥</text>{{partner.sum}}</view>
            <view class="tips">总奖金</view>
        </view>

        <view class="card-wrapper">

            <view class="card-header">
                <view class="l tab">伙伴ID</view>
                <view class="r tab">奖金</view>
            </view>
            <view class="card-body">
                <view class="none" v-if="!partner.records">暂无奖金，快去邀请小伙伴来赚奖金吧～</view>
                <view class="card-item" v-for="item in partner.records" :v-key="item.id">
                    <view class="item-one">
                        <view class="l user">
                            <img style="width: 88rpx;height: 88rpx;"  v-if="!item.partnerAvatar" src="@/assets/images/default_ava.png" alt="">
                            <img style="width: 88rpx;height: 88rpx;"  v-if="item.partnerAvatar" :src="item.partnerAvatar" alt="">
                            <view class="user-name">{{item.partnerName}}</view>
                        </view>
                        <view class="r status">
                            <view style="text-align: right;">
                                <view style="display: flex;">
                                    <img style="width: 40rpx;height: 40rpx;" src="@/assets/images/icon_hongbao.png"
                                         alt="">
                                    <view class="status-name">邀请成功</view>
                                </view>
                                <view style="color: #FF6100;">{{item.brokerage}}</view>
                            </view>
                            <img style="width: 40rpx;height: 40rpx; margin-left: 12rpx;" src="@/assets/images/down.png"
                                 alt="">
                        </view>
                    </view>

                    <view class="childers-card" v-if="item.partnerRelationships">
                        <view class="item-two" v-for="child in item.partnerRelationships">
                            <view class="l user">
                                <img style="width: 88rpx;height: 88rpx;" v-if="!child.partnerAvatar" src="@/assets/images/default_ava.png" alt="">
                                <img style="width: 88rpx;height: 88rpx;"  v-if="child.partnerAvatar" :src="child.partnerAvatar" alt="">

                                <view class="user-name">{{child.partnerName}}</view>
                            </view>
                            <view class="r status">
                                <view style="text-align: right;">
                                    <view style="display: flex;">
                                        <img style="width: 40rpx;height: 40rpx;" src="@/assets/images/icon_hongbao.png"
                                             alt="">
                                        <view class="status-name">邀请成功</view>
                                    </view>
                                    <view style="color: #FF6100;">{{child.brokerage}}</view>
                                </view>

                            </view>
                        </view>
                    </view>
                </view>

<!--
                <view class="card-item">
                    <view class="item-one">
                        <view class="l user">
                            <img style="width: 88rpx;height: 88rpx;" src="@/assets/images/default_ava.png" alt="">
                            <view class="user-name">Yuki</view>
                        </view>
                        <view class="r status">
                            <view style="text-align: right;">
                                <view style="display: flex;">
                                    <img style="width: 40rpx;height: 40rpx;" src="@/assets/images/icon_hongbao.png"
                                         alt="">
                                    <view class="status-name">邀请成功</view>
                                </view>
                                <view style="color: #FF6100;">￥100</view>
                            </view>

                        </view>
                    </view>

                </view>
-->

            </view>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, onUnmounted } from 'vue';
import Api from '@/apis/api';
let partner =reactive({
    records:[],
    sum:0
})
let sum = ref(0);

function myPartnerRelationship() {
    return Api.myPartnerRelationship().then((data :any) => {
        console.log(data.data.sum,"data.data.sum")
        partner.sum = data.data.sum
        partner.records=data.data.records
        console.log(data,"myPartnerRelationship---data")
    })
}
onMounted(() => {
    myPartnerRelationship()
})

onUnmounted(() => {

})

</script>

<style lang="scss" scoped>
page{
    background: #f9f9f9;
}
.hb-wrapper{
    padding: 0 30rpx;
    padding-top: 40rpx;
    .card-wrapper{
        background:#fff;
        border-radius: 28rpx;
        min-height: 22rpx;
        font-family: PingFang SC Bold;
        margin-top: 40rpx;
        .card-body{
            min-height: 130rpx;
            position: relative;
            .none{
                font-size: 28rpx;
                color: #999;
                position: absolute;
    top: 50%;
    transform: translate(0,-50%);
    width: 100%;
    text-align: center;
            }
            .card-item{
                padding: 0 20rpx;

                .item-one{
                    display: flex;
                justify-content: space-between;
                align-items: center;
                height: 140rpx;
                .user{
                    display: flex;
                    align-items: center;
                    .user-name{
                        font-size: 28rpx;
                        color: #333;
                        margin-left: 16rpx;
                    }
                }
                .status{
                    display: flex;
                    align-items: center;
                }
                }
                .childers-card{
                    border-radius: 20px;
                    background: rgba(216, 216, 216, 0.2);

                    .item-two{
                        display: flex;
                justify-content: space-between;
                align-items: center;
                height: 140rpx;
                    padding: 0 26rpx;

                    }
                    .user{
                    display: flex;
                    align-items: center;
                    .user-name{
                        font-size: 28rpx;
                        color: #333;
                        margin-left: 16rpx;
                    }
                }
                .status{
                    display: flex;
                    align-items: center;
                }
                }

            }
        }
        .card-header{
            display: flex;
            height: 90rpx;
            text-align: center;
            border-bottom: 1px solid #F3F3F3;
            line-height: 90rpx;
            .tab{
                width: 50%;
                font-size: 30rpx;
                color: #333;
            }
        }
    }
    .price-box{
        height: 300rpx;
		background: url('../../../assets/images/sys_qianbao_card.png') no-repeat;
		background-size: 100% 100%;
        border-radius: 32rpx;
        box-shadow: 0px 12rpx 12rpx 24rpx rgba(254, 112, 12, 0.07);
        font-family: PingFang SC Bold;
        display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
        .price{
            font-size: 60rpx;
            color: #fff;
            .unit{
                font-size: 46rpx;
            }
        }
        .tips{
            font-size: 30rpx;
            color: #FFECEC;
        }
    }
}
</style>
